<template>
	<div ref="chartCir" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},

		cirLed: {
			type: Object,
			default: {
				ledColor1: '#424542',
				ledColor2: '#002439',
				ledColor3: '#686868',
				ledColor4: '',
				ledColor5: '',
			},
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
	},
	setup(props) {
		const chartCir = ref<HTMLDivElement | null>(null);
		const { setOptions, resize } = useECharts(chartCir as Ref<HTMLDivElement>);
		onMounted(() => {
			window.addEventListener('resize', function () {
				resize();
			});
		});
		let seriesData = props.chartData;
		let cirLed = props.cirLed;
		let legend = props.chartData.map((item) => {
			return item.name;
		});

		let option = {
			// title: {
			//   top: 20,
			//   text: 'title',
			//   textStyle: {
			//     fontSize: 20,
			//     color: '#DDEEFF',
			//   },
			// },
			grid: {
				top: '15%',
				left: 0,
				right: '1%',
				bottom: 5,
				containLabel: true,
			},
			legend: {
				orient: 'vertical',
				top: 'center',
				left: '50%',
				itemWidth: 6,
				itemHeight: 6,

				itemGap: 15,
				textStyle: {
					align: 'left',
					verticalAlign: 'middle',
					rich: {
						name: {
							color: cirLed.ledColor1,
							fontSize: 14,
							padding: [10, 15, 10, 15],
						},
						value: {
							color: cirLed.ledColor2,
							fontSize: 14,
							padding: [10, 15, 10, 15],
						},
						rate: {
							color: cirLed.ledColor3,
							fontSize: 14,
							padding: [10, 7, 10, 3],
						},
					},
				},
				data: legend,
				formatter: (name) => {
					if (seriesData.length) {
						const item = seriesData.filter((item) => item.name === name)[0];
						return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
					}
				},
			},
			series: [
				{
					name: '需求类型占比',
					type: 'pie',
					itemStyle: {
						normal: {
							color: function (colors) {
								var colorList = ['#46a6ff', '#8146ff', '#30e8bb', '#f9c807', '#ff9447'];
								return colorList[colors.dataIndex];
							},
						},
					},
					center: ['25%', '50%'],
					radius: ['47%', '62%'],
					label: {
						normal: {
							show: false,
							position: 'center',
							formatter: '{value|{c}}\n{label|{b}}',
							rich: {
								value: {
									// padding: 5,
									color: cirLed.ledColor3,
									align: 'center',
									verticalAlign: 'middle',
									fontSize: 32,
								},
								label: {
									color: cirLed.ledColor3,
									align: 'center',
									verticalAlign: 'middle',
									fontSize: 16,
								},
							},
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '12',
							},
						},
					},
					labelLine: {
						show: false,
						length: 0,
						length2: 0,
					},
					data: [],
				},
			],
		};

		watchEffect(() => {
			props.chartData && initCharts();
		});

		function initCharts() {
			// let seriesData = props.chartData.map((item) => {
			// 	return item.value;
			// });
			// let xAxisData = props.chartData.map((item) => {
			//   return item.name;
			// });

			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整

			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			seriesData = props.chartData;

			legend = props.chartData.map((item) => {
				return item.name;
			});
			option = {
				// title: {
				//   top: 20,
				//   text: 'title',
				//   textStyle: {
				//     fontSize: 20,
				//     color: '#DDEEFF',
				//   },
				// },
				grid: {
					top: '15%',
					left: 0,
					right: '1%',
					bottom: 5,
					containLabel: true,
				},
				legend: {
					orient: 'vertical',
					top: 'center',
					left: '50%',
					itemWidth: 6,
					itemHeight: 6,

					itemGap: 15,
					textStyle: {
						align: 'left',
						verticalAlign: 'middle',
						rich: {
							name: {
								color: cirLed.ledColor1,
								fontSize: 15,
								padding: [10, 15, 10, 1], // 圆环内文字
							},
							value: {
								color: cirLed.ledColor2,
								fontSize: 15,
								padding: [10, 15, 10, 1],//
							},
							rate: {
								color: cirLed.ledColor3,
								fontSize: 15,
								padding: [10, 7, 10, 3],
							},
						},
					},
					data: legend,
					formatter: (name) => {
						if (seriesData.length) {
							const item = seriesData.filter((item) => item.name === name)[0];
							return `{name|${name}：}{value| ${item.value}} {rate| ${item.rate}%}`;
						}
					},
				},
				series: [
					{
						name: '需求类型占比',
						type: 'pie',
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ['#46a6ff', '#8146ff', '#30e8bb', '#f9c807', '#ff9447'];
									return colorList[colors.dataIndex];
								},
							},
						},
						center: ['25%', '50%'],
						radius: ['47%', '62%'],
						label: {
							normal: {
								show: false,
								position: 'center',
								formatter: '{value|{c}}\n{label|{b}}',
								rich: {
									value: {
										// padding: 5,
										color: cirLed.ledColor3,
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 32,
									},
									label: {
										color: cirLed.ledColor3,
										align: 'center',
										verticalAlign: 'middle',
										fontSize: 16,
									},
								},
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '12',
								},
							},
						},
						labelLine: {
							show: false,
							length: 0,
							length2: 0,
						},
						data: [],
					},
				],
			};
			option.series[0].data = seriesData;

			setOptions(option);
		}
		return { chartCir };
	},
});
</script>
